<template>
  <div class="card-title-wrapper">
    <span class="title-text" style="width: 160px"
      >{{ cardTitle }}（{{ count }}）</span
    >

    <el-button @click="handleLoad" icon="Refresh" circle link></el-button>
  </div>
  <div
    :class="[
      'wrapper',
      'card-wrapper-normal',
      darkMode ? 'card-wrapper-dark' : 'card-wrapper-light',
    ]"
  >
    <ActivityPage ref="page" />
  </div>
</template>

<script setup>
// import * as notamDecoderRegister from "@/plugins/notam-decoder.js";
import { h, ref, computed, onMounted, onUnmounted } from "vue";
import useCommonStore from "@/store/common";
import useNotamStore from "@/store/notam.js";
import ActivityPage from "@/views/NOTAM/ActivityPage";

const commonStore = useCommonStore();
const notamStore = useNotamStore();

const darkMode = computed(() => commonStore.darkMode);
const cardTitle = ref("NOTAM查询");

const page = ref();

const count = computed(() => {
  let count = notamStore.count;
  if (page.value) {
    count = page.value.counting() + "/" + count;
  }
  return count;
});

const handleLoad = () => {
  page.value.refresh();
};

onMounted(() => {
  // () => notamDecoderRegister;
});
</script>

<style scoped>
@import "@/styles/index.css";
</style>
